import React, { Component } from 'react';
import {
  StyleSheet, View, Image, Text, Button,
} from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
    };
  }

  render() {
    const icon = this.state.isShow ? require('../../assets/dropdown_arrow.png') : require('../../assets/leftArrow.png');
    // 注意：通过这种方式引用的图片资源包含图片的尺寸（宽度，高度）信息，如果你需要动态缩放图片（例如，通过 flex），
    // 你可能必须手动在 style 属性设置{ width: null, height: null }。
    return (
      <View style={styles.contain}>
        <View style={styles.childView}>
          <Text>本地图片，已知图片大小，不需要再声明一遍</Text>
          <Image source={require('../../assets/del.png')} />
          <Text>切换本地图片</Text>
          <Button
            onPress={() => this.setState((state) => ({ isShow: !state.isShow }))}
            title="切换图片"
          />
          <Image source={icon} />
          <Text>网络图片，需要手动指定图片的尺寸</Text>
          <Image
            source={{ uri: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1338595300,2119662265&fm=26&gp=0.jpg' }}
            style={{ width: 400, height: 400 }}
          />
        </View>
      </View>
    );
  }
}
// 如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。
// 你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片

// 如果你添加图片的时候 packager 正在运行，可能需要重启 packager 以便能正确引入新添加的图片。

// 与访问网络图片相比，Packager 可以得知图片大小了，不需要在代码里再声明一遍尺寸。

// require 中的图片名字必须是一个静态字符串
const styles = StyleSheet.create({
  contain: {
    flex: 1,
  },
  childView: {
    marginHorizontal: 20, // 相同于同时设置marginLeft和marginRight
    // marginVertical相同于同时设置marginTop和marginBottom
    backgroundColor: 'lightblue',
    width: 300,
  },
});
export default MyComponent;
